<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07_节点方法</title>
    <style type="text/css">
        .active{
            color: red;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="box">
        <p id="active">test</p>
    </div>
    <!--
        动态的操作节点
        1.创建节点 createElement()
        2.插入节点
                 appendChild()
                 insertBefore(newNode, node)
        3.删除节点removeChild()
        4.替换节点 replaceChild(newNode, node)
        5.创建文本节点 createTextNode()
     -->

     <script type="text/javascript">
         var oDiv = document.getElementById('box');
         var oAtive = document.getElementById('active');

         var newNode = document.createElement('p');
         var newNode2 = document.createElement('p');
         var newNode3 = document.createElement('a');

         console.log(newNode === newNode2);

         newNode.innerHTML = '<a href="#">test01@qq.com</a>';
         newNode2.innerHTML = '<a href="#">test02@qq.com</a>';
         newNode3.setAttribute('href','http://www.baidu.com');
         newNode3.innerHTML = '百度一下';

         newNode.setAttribute('class','active');
         oDiv.appendChild(newNode);
        //  第一个参数是新插入的节点, 第二个参数是参考的节点
         oDiv.insertBefore(newNode2,oAtive);


         /*
         var textNode = document.createTextNode('test01');
         newNode.appendChild(textNode);
         */

        //  newNode.innerText = 'test01@qq.com';
        newNode = null;  // 释放对象

        // oDiv.removeChild(oAtive);   删除操作
        oDiv.replaceChild(newNode3, oAtive);

     </script>
</body>
</html>